<template>
  <div class="musiclist">
    <!-- 登陆后，每日推荐 -->
    <div class="list-item newday"
         v-if="isShow"
         @click="enterDayDetail()">
      <div class="new">
        <p>{{getDate}}</p>
        <div>{{time}}</div>
      </div>
      <div class="title">每日推荐</div>
    </div>
    <div class="list-item"
         v-for="(item,index) in personList"
         :key="index"
         @click="enterDetail(index)">
      <img :src="getImgUrl(item)"
           alt=""
           @load="imgLoad">
      <div class="title">{{item.name}}</div>
      <div class="count">
        <div>
          <img src="~assets/img/content/erji.svg"
               alt="">
          {{item.playCount}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { detailMixin, imgLoadMixin } from 'assets/common/mixin'
import { _getRecommendResource } from "network/discover";
export default {
  name: 'MusicList',
  props: {
    personList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      isShow: false,
      cookie: null
    }
  },
  mixins: [detailMixin, imgLoadMixin],
  mounted () {
    // 登陆才显示每日推荐
    if (this.$store.state.cookie != '' && this.$store.state.cookie != null) {
      this.isShow = true;
    }
  },
  methods: {
    // 查看歌曲详情
    enterDetail (index) {
      this.$router.push('/musiclistdetail/' + this.personList[index].id + '/' + new Date().getTime())
    },
    // 获取图片地址
    getImgUrl (item) {
      return item.picUrl || item.coverImgUrl
    },
    // 图片加载,判断图片是否加载完毕
    imgLoad () {
      if (this.imgCount === this.personList.length) this.$emit("imgLoad");
      this.imgCount++;
    },
    // 每日推荐页面
    enterDayDetail () {
      this.$router.push('/daymusic');
    }
  }
}
</script>

<style  scoped>
.musiclist {
  width: 100%;
  display: flex;
  margin-left: 20px;
  /* // 换行 */
  flex-wrap: wrap;
  align-items: center;
}
.musiclist .list-item {
  position: relative;
  margin: 10px 15px 0;
  width: 160px;
  padding-bottom: 20px;
  font-size: 13px;
  color: #000;
}
.list-item img {
  width: 160px;
  height: 100%;
}
.list-item .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.count {
  width: 100%;
  height: 20px;
  line-height: 20px;
  text-align: right;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
}
.count img {
  display: inline-block;
  height: 10px;
  width: 10px;
}

.newday .new {
  width: 160px;
  height: 150px;
  text-align: center;
}
.new div {
  font-size: 89px;
  color: #00aa85;
}
.new p {
  font-size: 24px;
  color: #828394;
}
</style>
